import { Card, Tabs } from 'flowbite-react'
import { FaCheckCircle, FaTimes, FaClock, FaChartLine, FaBook, FaCalendar } from 'react-icons/fa'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'

export default function StudyStats({ stats }) {
  const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444']

  return (
    <div className="space-y-6">
      {/* 保留原有的统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* ... 原有的四个统计卡片 ... */}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 卡片组分布 */}
        <Card>
          <h3 className="text-xl font-bold text-gray-900 mb-4">卡片组分布</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={stats.deckStats}
                  dataKey="cardCount"
                  nameKey="name"
                  cx="50%"
                  cy="50%"
                  outerRadius={80}
                  label
                >
                  {stats.deckStats.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* 学习效果分析 */}
        <Card>
          <h3 className="text-xl font-bold text-gray-900 mb-4">学习效果分析</h3>
          <div className="space-y-4">
            {stats.deckStats.map(deck => (
              <div key={deck.id} className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="font-medium text-gray-700">{deck.name}</span>
                  <span className="text-sm text-gray-500">
                    正确率: {((deck.correct / (deck.reviews || 1)) * 100).toFixed(1)}%
                  </span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2.5">
                  <div
                    className="bg-blue-600 h-2.5 rounded-full"
                    style={{ width: `${((deck.correct / (deck.reviews || 1)) * 100)}%` }}
                  ></div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* 学习时间分布 */}
        <Card>
          <h3 className="text-xl font-bold text-gray-900 mb-4">每日学习时段分布</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={stats.hourlyStats}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="hour" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="count" stroke="#8B5CF6" name="学习次数" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* 记忆曲线 */}
        <Card>
          <h3 className="text-xl font-bold text-gray-900 mb-4">记忆保持曲线</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={stats.retentionStats}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="interval" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="retention" stroke="#EC4899" name="记忆保持率" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>
      </div>

      {/* 详细统计表格 */}
      <Card>
        <h3 className="text-xl font-bold text-gray-900 mb-4">卡片组详细统计</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left text-gray-500">
            <thead className="text-xs text-gray-700 uppercase bg-gray-50">
              <tr>
                <th className="px-6 py-3">卡片组</th>
                <th className="px-6 py-3">总卡片数</th>
                <th className="px-6 py-3">复习次数</th>
                <th className="px-6 py-3">正确率</th>
                <th className="px-6 py-3">平均间隔(天)</th>
                <th className="px-6 py-3">最后复习</th>
              </tr>
            </thead>
            <tbody>
              {stats.deckStats.map(deck => (
                <tr key={deck.id} className="bg-white border-b">
                  <td className="px-6 py-4 font-medium text-gray-900">{deck.name}</td>
                  <td className="px-6 py-4">{deck.cardCount}</td>
                  <td className="px-6 py-4">{deck.reviews}</td>
                  <td className="px-6 py-4">
                    {((deck.correct / (deck.reviews || 1)) * 100).toFixed(1)}%
                  </td>
                  <td className="px-6 py-4">{deck.avgInterval.toFixed(1)}</td>
                  <td className="px-6 py-4">{new Date(deck.lastReview).toLocaleDateString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  )
}